<ion-header>

  <ion-navbar color="secondary">
    <ion-title>Download: {{novel?.title}}</ion-title>

    <ion-buttons end>
      <button ion-button icon-only (click)="selectPopover($event)">
        <ion-icon name="done-all"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list [virtualScroll]="chapters">
    <ion-item *virtualItem="let chapter">
      <ion-label>Content {{chapter.number}}: {{chapter.title}}</ion-label>
      <ion-checkbox [(ngModel)]="chapter.checked"></ion-checkbox>
    </ion-item>
  </ion-list>
  <ion-fab color="primary" *ngIf="!isUpdated" right bottom>
    <button ion-fab [disabled]="!selectedChapters.length" (click)="download()">
      <ion-icon name="download"></ion-icon>
    </button>
  </ion-fab>

  <div padding-top *ngIf="isUpdated" class="no-content">
    <ion-icon name="ios-happy-outline"></ion-icon>
    <div>Nothing new here...</div>
  </div>
</ion-content>